<template>
  <div id="app">
    <div ref="scrollTarget" class="app-scroll" @scroll="commonScroll(appScroll)">
      <div class="app-header">
        <app-header />
      </div>
      <div class="app-main">
        <app-router />
      </div>
    </div>
    <MessageMini v-model="messageMini.isOpen" :content="messageMini.content" />
  </div>
</template>

<script lang="ts" setup>
import AppRouter from "./layout/AppRouter/AppRouter.vue";
import AppHeader from "./layout/AppHeader/AppHeader.vue";
import MessageMini from "./components/message-mini/MessageMini.vue";
import { storeToRefs } from "pinia";
import { useGlobalStore } from "./stores/global.sotre";
import "@/assets/font/iconfont.js";
import "@/assets/font/iconfont.css";
import { useScroll } from "./hooks/useScroll.hooks";

const globalStore = useGlobalStore();
const { messageMini } = storeToRefs(useGlobalStore());
const { scrollData, scrollTarget, commonScroll } = useScroll();

const appScroll = () => {
  globalStore.setScrollData(scrollData);
};
</script>

<style lang="less">
// 全局样式
@import "@/assets/css/common.less";
body {
  background-color: rgb(185, 183, 183);
}
</style>

<style lang="less" scoped>
#app {
  position: relative;
  width: 100%;
  height: 100vh;
  min-width: 1000px;
  overflow: hidden;
}
.app-scroll {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: auto;
}
.app-header {
  height: 60px;
  width: 100%;
}

.app-main {
  flex: 1;
  width: 100%;
}
</style>
